<template>
    <u-app ref="app">
        <!-- 会员信息 -->
        <view class="user-head">
            <!-- 背景 -->
            <image :src="bg" class="bg" mode="widthFix"></image>

            <view class="user-info">
                <view class="avatar">
                    <u-avatar :src="avatar" :size="140"></u-avatar>
                </view>
                <view class="info-box">
                    <view class="nickname">
                        微信用户
                        <span class="label">红宝石</span>
                    </view>
                    <view class="explain">这家伙很懒…</view>
                </view>
                <view class="arrow">
                    <u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
                </view>
            </view>
        </view>

        <!-- 会员资产 -->
        <view class="user-assets">
            <u-grid :col="3">
                <u-grid-item>
                    <view class="grid-text">0</view>
                    <view class="grid-text">余额</view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-text">0</view>
                    <view class="grid-text">积分</view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-text">0</view>
                    <view class="grid-text">优惠卷</view>
                </u-grid-item>
            </u-grid>
        </view>

        <!-- 订单功能 -->
        <view class="user-order">
            <u-cell title="我的订单" is-link></u-cell>
            <u-grid :col="4">
                <u-grid-item>
                    <u-icon name="/static/images/shop/daizhifu.png" :fontSize="60"></u-icon>
                    <view class="grid-text">待付款</view>
                </u-grid-item>
                <u-grid-item>
                    <u-icon name="/static/images/shop/daifahuo.png" :fontSize="60"></u-icon>
                    <view class="grid-text">待发货</view>
                </u-grid-item>
                <u-grid-item>
                    <u-icon name="/static/images/shop/daishouhuo.png" :fontSize="60"></u-icon>
                    <view class="grid-text">待收货</view>
                </u-grid-item>
                <u-grid-item>
                    <u-icon name="/static/images/shop/yiwancheng.png" :fontSize="60"></u-icon>
                    <view class="grid-text">已完成</view>
                </u-grid-item>
            </u-grid>
        </view>

        <!-- 更多功能 -->
        <view class="user-service">
            <u-cell title="余额明细" is-link></u-cell>
            <u-cell title="积分明细" is-link></u-cell>
            <u-cell title="地址" is-link></u-cell>
            <u-cell title="二维码" is-link></u-cell>
            <u-cell title="意见反馈" is-link />
            <u-cell title="关于我们" is-link />
        </view>
    </u-app>
</template>

<script lang="ts" setup>
    import bg from '@/static/images/user/mine_bg_3x.png';
    import avatar from '@/static/images/user/def_touxiang.png';

    onLoad(() => {
        console.log('user');
    });
</script>

<style lang="scss" scoped>
    .user-head {
        width: 100%;
        height: 272rpx;
        position: relative;
        display: flex;
        flex-direction: column;

        image.bg {
            width: 100%;
            height: 272rpx !important;
            position: absolute;
        }

        .user-info {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 30rpx;
            padding-right: 20rpx;

            z-index: 1;
            position: relative;
            margin: auto 0;

            .avatar {
                margin-right: 20rpx;
            }

            .info-box {
                flex: 1;

                .nickname {
                    font-size: 36rpx;
                    padding-bottom: 20rpx;
                    color: #ffffff;

                    .label {
                        font-size: 24rpx;
                        font-weight: bold;
                        margin-left: 20rpx;
                    }
                }

                .explain {
                    font-size: 28rpx;
                    color: #ffffff;
                    opacity: 0.75;
                }
            }

            .arrow {
                margin-left: 10rpx;
                padding: 10rpx;
            }
        }
    }

    .user-assets {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;

        .grid-text {
            font-size: 28rpx;
            margin-top: 4rpx;
            color: #607d8b;
        }
    }

    .user-order {
        margin-top: 40rpx;
        background-color: #ffffff;

        .grid-text {
            font-size: 28rpx;
            color: #909399;
            /* #ifndef APP-PLUS */
            box-sizing: border-box;
            /* #endif */
        }
    }

    .user-service {
        margin-top: 40rpx;
        background-color: #ffffff;

        .grid-text {
            font-size: 28rpx;
            color: #909399;
            padding: 10rpx 0 20rpx 0rpx;
            /* #ifndef APP-PLUS */
            box-sizing: border-box;
            /* #endif */
        }
    }
</style>
